<template>  
	<div :class='[ config.class ]' :style="{padding: config?.padding ?? '8px 0'}">
		<Form 
		# 		= '{ form }'
		ref 	= 'formRef' 
		class 	= 'jzer-form jzer-search-form' 
		:class 	= "[`jzer-form-${config.size}`]"
		@submit = 'onSubmit' 
		@init 	= 'onInit' 
	>
			<!-- 更多搜索表单 -->
		<!-- 	<div class='fxt' v-if='Array.isArray(config?.groupData)'>
				<div className='fxw ex' :style='{gap}'>
					<SearchItemComponent :data='config.groupData' :form='form' :config='config' :loading='loading' :width='width' :formRef='formRef'/>
				</div>
				<div class='fxm'>
					<Controls :size="config?.size" :loading='loading' :gap='btnGap' :config='{ controls: btnData }' />
					<DownCircleOutlined @click='onShow' class='ease' :class="{ 'rotate-up': show }" :style='{color:fg.mainColor}' style='font-size:24px;margin-left:5px;' v-if='config.data.length > 0' />
				</div>
			</div> -->
			<div class='fxt' v-if='Array.isArray(data)'>
				<!-- 搜索表单 -->
				<div class='fxw ex' :key='key' :style="{gap}">
					<SearchItemComponent :data='data' :form='form' :config='config' :loading='loading' :width='width' :formRef='formRef'/>
				</div>
				<Controls v-if='!hideBtn' :size="config?.size" :loading='loading' :gap='btnGap' :config='{ controls: btnData }' />
			</div>
		</Form>
	</div>
</template>

<script setup>
	import { DownCircleOutlined } from '@ant-design/icons-vue'
	import SearchItemComponent from './item/search-item.vue'
	/* --------------------------- Component --------------------------- */
	const Form 			= $.lazy(()=>import('@antd/form/layout/form.vue'))
	const FormItem 		= $.lazy(()=>import('@antd/form/layout/form-item.vue'))
	const Controls 	= $.lazy(()=>import('#cpt/temp/Controls.vue'))
	/* --------------------------- props --------------------------- */
	const props = defineProps({
		loading			: Boolean,
		config 			: { type:Object, default: { data:[] } },
		controls  		: { type:[ Object, Array, Boolean, Function ], default: ({ config }) => config.controls ?? {} },
		width 			: { type:[Boolean, Number], default: ({ config }) => config.width ?? 150 },
		hideBtn 		: { type:[Boolean, Number], default: ({ config }) => config.hideBtn },
		cache 			: { type:[Boolean, Number], default: ({ config }) => config.cache ?? $config.cache },
		gap 			: { type: String, default: ({ config }) => config.gap ?? '5px 8px'},
		btnGap 			: { type: Number, default: ({ config }) => config.btnGap ?? $config.btnSpace}
	})
	/* --------------------------- 方法 --------------------------- */
	const fg = $config
	let formRef = $ref()
	let config = $ref({
		size: 'search',
		...props.config
	})
	let key = $ref(0)
	// let show = $ref(!Boolean(config.groupData))
	const emit = defineEmits(['submit', 'init', 'reset'])
	
	let data = $ref(config.data)
	
	const onSubmit = param => {
		emit('submit',param)
		if( config.onSearch ){
			config?.onSubmit?.( param )
		}
	}
	
	const onShow = () => {
		show = !show
		config.show = show
		config?.onExpand?.(show)
	}
	/* --------------------------- 按钮 --------------------------- */
	let controls  = props.controls
	const onReset = () => {
		formRef.reset()
		emit('reset')
		controls?.onReset?.()
	}
	let btnData = $ref( [] )
	const setControls = () => {
		controls = $fn.getResult(controls,{ formRef })
		if( $fn.hasArray( controls ) ){
			btnData = controls
		}else if( $fn.isObject( controls ) ){
			controls.align = controls.align ?? 'center'
			controls.size = controls.size ?? 'middle'
			const { ok, reset,  before=[], after=[] } = controls
			btnData = [
				...before,
				{ label:'重置', mode:'reset', ghost:true, click:onReset, ...reset },
				{ label:'搜索', mode:'search', htmlType:'submit',  ...ok },
				...after,
			]
		}
	}
	if(controls != false ){ setControls(controls) }
	/* --------------------------- 初始化 --------------------------- */
	const f = {
		// 提交表单
		submit: () => formRef.submit(),
		// 重置表单
		reset:onReset,
		// 回显值
		setValue: value => formRef.setValue(value),
		// 获取表单字段值
		getValue: name => formRef.getValue(name)
	}
	const onInit = async ({ form }) => {
		let { param, query } = config
		// 配置配置默认参数
		param = $fn.getResult(param)
		query = $fn.getResult(query)
		const queryParam = { ...query, ...param }
		// 从 value 配置默认参数
		// const arr = [ ...config?.groupData??[], ...config?.data??[] ]
		const arr = config.data ?? []
		if($fn.hasArray( arr )){
			formRef.setDefaultValue( arr, param)
		}
		const p = { formRef:f, param, query, queryParam}
		config?.onInit?.( p )
		emit('init', p )
	}
	/* --------------------------- 通信 --------------------------- */
	defineExpose(f)
</script>